import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import ScannerAnimation from '../component/scanner_animation'; // 引入扫描动画
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
const SCAN_AREA_SIZE = 250;
const TOP_BOTTOM_HEIGHT = (screenHeight - SCAN_AREA_SIZE) / 2.3;
const LEFT_RIGHT_WIDTH = (screenWidth - SCAN_AREA_SIZE) / 2;

const ScannerOverlays = () => {
  return (
    <View style={styles.overlay}>
      {/* 顶部覆盖层 */}
      <View style={[styles.cover, { height: TOP_BOTTOM_HEIGHT }]} />
      
      {/* 中间部分 */}
      <View style={styles.middleContainer}>
        {/* 左侧覆盖层 */}
        <View style={[styles.cover, { width: LEFT_RIGHT_WIDTH }]} />
        {/* 扫描区域（含动画） */}
        <View style={styles.scanArea}>
          <ScannerAnimation /> {/* 添加扫描动画 */}
          <Text style={styles.text}>对准二维码扫描</Text>
        </View>
        {/* 右侧覆盖层 */}
        <View style={[styles.cover, { width: LEFT_RIGHT_WIDTH }]} />
      </View>

      {/* 底部覆盖层 */}
      <View style={[styles.cover, { height: 300 }]} />
    </View>
  );
};

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent',
  },
  cover: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  middleContainer: {
    flexDirection: 'row',
    height: SCAN_AREA_SIZE,
  },
  scanArea: {
    width: SCAN_AREA_SIZE,
    height: SCAN_AREA_SIZE,
    backgroundColor: 'transparent',
    borderWidth: 2,
    borderColor: 'white',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default ScannerOverlays;